<!--
 * @Autor: 王琛
 * @Description: 左右轮播里面添加上下轮播
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#unitAppreciation {
  width: 100%;
  height: calc(100% - 58px);
  position: relative;

  .swipeTopBottom, .swipeTop, .swipeBottom {
    width: 100%;
    height: 100%;
  }

  .swipeTop, .swipeBottom {
    img {
      width: 100%;
      height: 100%;
    }
  }

  .floorPlanDisplay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, .5)

    .floorPlanDisplay_fn {

    }
  }
}
</style>

<style lang="stylus">
#unitAppreciation {
  .floorPlanDisplay_fn {
    width: 100%;
    height: calc(100vh - 58px);

    .van-swipe, .van-swipe__track, .van-swipe-item, .van-image {
      width: 100%;
      height: 100%;
    }

    .van-swipe-item {
      padding: 10px;
      box-sizing: border-box;

      img {
        width: 100%;
        height: 100%;
      }
    }

  }
}
</style>

<template>
  <div id="unitAppreciation">
    <!-- 上下轮播图 -->
    <van-swipe class="swipeTopBottom" :loop="false" :show-indicators="false" :vertical="true" :initial-swipe="1">
      <!-- 上图 -->
      <van-swipe-item>
        <!-- 左右轮播 -->
        <van-swipe class="swipeTop" ref="_swipeTop" :loop="false" :show-indicators="false" :style="{ background: `url('${ _data.top_bg }') no-repeat center center / 100% 100%` }" @change="val=>{swiperChang(val,'top')}">
          <van-swipe-item v-for="(item,index) in _data.top_img_list || []" :key="index">
            <img :src="item" alt="" srcset="" @click="swiperTopClick({ item,index })">
          </van-swipe-item>
        </van-swipe>
      </van-swipe-item>
      <!-- 下图 -->
      <van-swipe-item>
        <!-- 左右轮播 -->
        <van-swipe class="swipeBottom" ref="_swipeBottom" :loop="false" :show-indicators="false" :style="{ background:`url('${ _data.bottom_bg }') no-repeat center center / 100% 100%` }" @change="val=>{swiperChang(val,'bottom')}">
          <van-swipe-item v-for="(item,index) in _data.bottom_img_list" :key="index">
            <img :src="item" alt="" srcset="">
          </van-swipe-item>
        </van-swipe>
      </van-swipe-item>
    </van-swipe>
    <!-- 平面图展示 -->
    <!--<div class="floorPlanDisplay" v-show="_data.plane_show">-->
    <!--</div>-->
    <!--<VanImagePreview v-model:show="_data.plane_show" :images="[_data.plane_view_list[_data.plane_show_index]]" :before-close="()=> _data.plane_show = false" :class-name="'floorPlanDisplay_fn'" :show-index="false"/>-->
  </div>
</template>


<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import {Swipe, SwipeItem, ImagePreview} from 'vant';
import {emitter} from "tool";

const _route = useRoute();
const _store = useStore();
const _state = _store.state;
const _props = defineProps({})
const _data = reactive({
  // 显示隐藏平面图展示隐藏
  plane_show: false,
  // 屏幕图放大索引
  plane_show_index: 0,
  // 上部分轮播图列表
  top_img_list: [],
  // 下部分轮播图列表
  bottom_img_list: [],
  // 上部分背景
  top_bg: "",
  // 下部分背景
  bottom_bg: "",
  // 大图展示
  plane_view_list: [],
  // 当前轮播图的索引
  currentSwiperIndex: 0
});
const _pageConfig = _route.params || null;
const _swipeTop = ref(null)
const _swipeBottom = ref(null)
const VanImagePreview = ImagePreview.Component;
import {api as viewerApi} from 'v-viewer'

onMounted(() => {
  init();
});
watch(() => _state.currentSelectMenu.one, (newOne) => {
  console.log('%c王琛-163952', 'color:#fff;background:#ee6f57;padding:3px;border-radius:2px', newOne);
  _swipeBottom.value.swipeTo(newOne.index);
  _swipeTop.value.swipeTo(newOne.index);
})

/**
 * @description: 页面初始化
 * @author: 王琛
 * @Date: 2022-07-28 16:42:33
 * @param {*}
 * @return {*}
 */
function init() {
  emitter.emit("unitAppreciation", {
    index: 0,
  })
  // 默认资源路径
  const url = _pageConfig.url;
  // 下边背景图
  _data.bottom_bg = `${url}${_pageConfig.bottom_bg}`;
  // 上边背景图
  _data.top_bg = `${url}${_pageConfig.top_bg}`;

  let bottom_img_list = [];
  let top_img_list = [];
  let plane_view_list = []

  _pageConfig.btn_config.forEach(e => {
    bottom_img_list.push(`${url}${e}.png`)
    top_img_list.push(`${url}${e}_plane_info.png`)
    plane_view_list.push(`${url}${e}_plane.jpg`)
  })
  // 下边轮播资源
  _data.bottom_img_list = bottom_img_list;
  // 下边轮播资源
  _data.top_img_list = top_img_list;
  // 平面图大图展示
  _data.plane_view_list = plane_view_list;
  // 按钮资源
  // _data.btn_list = [];
}

/**
 * @description: 轮播图发生变化之后执行的事件
 * @author: 王琛
 * @Date: 2022-07-28 17:06:05
 * @param {*}
 * @return {*}
 */
function swiperChang(index, mark) {
  if (_data.currentSwiperIndex == index) return;
  _data.currentSwiperIndex = index;
  emitter.emit("unitAppreciation", {
    index,
  })
  if (mark == "top") {
    _swipeBottom.value.swipeTo(index);
  } else {
    _swipeTop.value.swipeTo(index);
  }
}


/**
 * @description: 点击了上面的轮播图
 * @author: 王琛
 * @Date: 2022-07-28 17:13:57
 * @param {*}
 * @return {*}
 */
function swiperTopClick({item, index}) {
  viewerApi({
    options: {
      toolbar: false,
      navbar: false,
    },
    images: [_data.plane_view_list[index]]
  })
  _data.plane_show = true;
  _data.plane_show_index = index;
}

</script>

